<template>
  <el-scrollbar class="notice-page" wrap-class="scrollbar-wrapper">
    <div class="top-area">
      <img class="neu-logo" src="../../../common/assets/images/Neusiri-logo.png" />
    </div>
    <div class="content">
      <el-breadcrumb separator="/" style="margin-bottom: 16px">
        <el-breadcrumb-item :to="{ path: '/login' }">登陆</el-breadcrumb-item>
        <el-breadcrumb-item>公告中心</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- <el-link type="primary" @click="goBack" style="margin-bottom:16px">返回登陆</el-link> -->
      <div class="info">
        <el-tabs type="border-card" v-model="sourceType">
          <el-tab-pane name="2" label="采购寻源"></el-tab-pane>
          <el-tab-pane name="3" label="中标"></el-tab-pane>
          <el-tab-pane name="4" label="新闻"></el-tab-pane>
        </el-tabs>
        <div class="table-info" v-if="tableData.length > 0">
          <div v-for="item in tableData" :key="item.id" class="list-item">
            <div class="left">
              <div class="month-year">
                <div class="month">{{ item.createTime.substring(5, 10) }}</div>
                <div class="yeah">{{ item.createTime.substring(0, 4) }}</div>
              </div>
              <div class="notice-title" :title="item.noticeTitle">{{ item.noticeTitle }}</div>
            </div>

            <i class="el-icon-caret-right" style="font-size: 16px; cursor: pointer" @click="goDetail(item)"></i>
          </div>
          <x-pagination
            :limit.sync="pagination.pageSize"
            :page.sync="pagination.pageNum"
            :total="pagination.total"
            @pagination="onPageChange"
          >
          </x-pagination>
        </div>
        <div v-else class="nodata">暂无数据</div>
      </div>
    </div>
    <!-- <div class="footer">
      <img class="neu-logo" src="../../../common/assets/images/Neusiri-logo.png" >
      <div class="footer-info">
        <div>
          <div class="item">联系电话</div>
          <div class="txt">联系电话：024-83660499</div>
          <div class="txt">联系邮箱：contact@neusoft.com</div>
          <div class="txt">联系地址：上海市闽行区紫月路1000号</div>
        </div>
        <div>
          <div class="item">移动应用</div>
          <img class="qr-code" src="../../../common/assets/images/qrCode.png" >
        </div>
        <div>
          <div class="item">关注我们</div>
          <img class="qr-code" src="../../../common/assets/images/qrCode.png" >
        </div>
      </div>
    </div> -->
    <!-- 预览弹窗 -->
    <announcement-info ref="announcementInfoCom"></announcement-info>
  </el-scrollbar>
</template>
<script>
  import { TableListMixin } from '@package/utils'
  import { mapActions } from 'pinia'
  import { pinias } from '@/common/pinia'
  import AnnouncementInfo from '../components/announcementInfo.vue'

  const { login } = pinias
  export default {
    name: 'Login',
    components: { AnnouncementInfo },
    mixins: [TableListMixin],
    data() {
      return {
        loading: false,
        sourceType: '2',
        tableData: [],
        purchaseNoticeList: [],
        orderNoticeList: [],
        newsNoticeList: [],
        listUrl: '/upms/notice/supplier/page',
        otherParam: {
          noticeType: ''
        }
      }
    },
    computed: {},
    watch: {
      sourceType: {
        handler(val) {
          this.otherParam.noticeType = val
          this.loadData()
        },
        deep: true,
        immediate: false
      }
    },
    mounted() {
      const { type } = this.$route.query
      this.sourceType = type
      this.otherParam.noticeType = type
      this.loadData()
    },
    methods: {
      ...mapActions(login, ['LoginIn']),
      goBack(tab) {
        this.$router.go(-1)
      },
      // 详情
      goDetail(info) {
        this.$refs.announcementInfoCom.handleOpen(info)
      },
      goLogin() {
        this.$router.push({ path: '/login' })
      },
      onPageChange() {
        this.loadData()
      }
    }
  }
</script>
<style lang="scss" scoped>
  ::v-deep .el-scrollbar__bar.is-horizontal {
    height: 0 !important;
  }
  ::v-deep .el-scrollbar__wrap {
    overflow-x: hidden;
  }

  .notice-page {
    box-sizing: border-box;
    background-image: url('../../../common/assets/images/loginBg.png');
    .top-area {
      height: 72px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
      display: flex;
      align-items: center;
      .neu-logo {
        width: 150px;
        height: 32px;
        margin-left: 10%;
      }
    }
    .content {
      padding: 20px 10%;
      background: #fff;
      .info {
        border: 1px solid #eee;
      }
      .nodata {
        padding: 16px;
      }
      .table-info {
        padding: 16px;
      }
      .list-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 0;
        border-bottom: 1px dashed #e0e0e0;
        .notice-title {
          height: 20px;
          font-size: 16px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          line-height: 20px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          width: calc(100% - 100px);
          cursor: pointer;
        }
        .left {
          width: calc(100% - 16px);
          display: flex;
          align-items: center;
        }
        .month-year {
          padding-right: 20px;
          border-right: 1px solid #e0e0e0;
          margin-right: 20px;
          width: 44px;
        }
        .month {
          font-size: 14px;
          font-family: PingFang SC-Semibold, PingFang SC;
          font-weight: 600;
          color: #757575;
        }
        .year {
          font-size: 12px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #757575;
        }
      }
    }
    .footer {
      height: 360px;
      width: 100%;
      background: #3e4963;
      padding: 52px 10%;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      .neu-logo {
        width: 150px;
        height: 32px;
      }
      .footer-info {
        font-size: 15px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.8);
        display: flex;
        > div {
          margin-left: 120px;
        }
        .item {
          height: 19px;
          font-size: 15px;
          font-family: PingFang SC-Semibold, PingFang SC;
          font-weight: 600;
          color: #ffffff;
          line-height: 19px;
          margin-bottom: 25px;
        }
        .txt {
          margin-bottom: 24px;
        }
        .qr-code {
          width: 120px;
          height: 120px;
        }
      }
    }
    ::v-deep .el-tabs__nav-scroll {
      padding: 0 16px;
    }
    ::v-deep .el-tabs--border-card {
      background: #fff;
      border: 1px solid #dcdfe6;
      -webkit-box-shadow: none;
      box-shadow: none;
      // border-bottom: none;
      // border-left: none;
      // border-right: none;
      border: none;
    }
    ::v-deep .el-tabs__content {
      display: none;
    }
  }
</style>
